<template>
  <div class="print-container">
    <div class="printBody">
      <div id="printForm">
        <table class="print-document-info" id="print-container">
          <tr>
            <td class="columnTitle">
              <div>单据详情</div>
              <div class="underline"></div>
            </td>
          </tr>
          <tr>
            <td>
              <table class="print-table list">
                <tr>
                    <td class="label">单据编号</td>
                    <td class="value">{{detailInfo.number}}</td>
                </tr>
                <tr>
                    <td class="label">入库处理时间</td>
                    <td class="value">{{ formData.handleTime }}</td>
                </tr>
                <tr>
                    <td class="label">创建人</td>
                    <td class="value">{{detailInfo.createUserName}}</td>
                </tr>
                <tr>
                    <td class="label">备注</td>
                    <td class="value">{{ formData.remark }}</td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <table class="print-asset-list">
          <tr>
            <td class="columnTitle">
              <div>资产明细</div>
              <div class="underline"></div>
            </td>
          </tr>
          <tr>
            <td>
              <table class="print-table vxe-table vxe-table--render-default">
                <thead>
                  <tr>
                    <th>资产编号</th>
                    <th>资产名称</th>
                    <th>资产分类</th>
                    <th>品牌</th>
                    <th>型号</th>
                    <th>购置方式</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="asset in items" :key="asset.name">
                    <td>{{ asset.number }}</td>
                    <td>{{ asset.name }}</td>
                    <td>{{ asset.categoryName }}</td>
                    <td>{{ asset.brand }}</td>
                    <td>{{ asset.model }}</td>
                    <td>{{ asset.buyway }}</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <tr>
            <td class="columnTitle">
              <div>审批情况</div>
              <div class="underline"></div>
            </td>
          </tr>
          <tr>
            <td>
              <table class="print-table vxe-table vxe-table--render-default">
              
              </table>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';

const detailInfo = inject('detailInfo');

const formData = computed(()=> {
  const detailValue = detailInfo.value;
  if (detailValue && detailValue.formData) {
    return detailValue.formData;
  }
  return {};
})

const items = computed(()=> {
  const formValue = formData.value;
  if (formValue && formValue.items) {
    return formValue.items;
  }
  return [];
})

</script>
<style scoped>
.print-container {
  padding: 20px;
  width: 100%;
}

.print-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
}

.print-title {
  font-size: 24px;
  font-weight: bold;
  width: 50%; 
}

.print-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007BFF;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s;
  width: auto; 
}

.print-content {
  width: 100%;
  page-break-after: always;
}

.print-document-info,
.print-asset-list {
  width: 100%;
  page-break-after: always;
}

.print-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.print-table th,
.print-table td {
  border: 1px solid #dddddd;
  padding: 8px;
  text-align: left;
  width: 100%; 
}

.print-table th {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #333333;
}

.print-table td {
  color: #666666;
}

.print-table th:nth-child(1),.print-table td:nth-child(1) {
  width: 20%; 
}

.print-table th:nth-child(2),.print-table td:nth-child(2) {
  width: 15%; 
}

.print-table th:nth-child(3),.print-table td:nth-child(3) {
  width: 15%;
}

.print-table th:nth-child(4),.print-table td:nth-child(4) {
  width: 25%;
}

.print-table th:nth-child(5),.print-table td:nth-child(5) {
  width: 10%; 
}

.print-table th:nth-child(6),.print-table td:nth-child(6) {
  width: 10%;
}
.print-table th:nth-child(7),.print-table td:nth-child(7) {
  width: 15%;
}

.print-table th:nth-child(1),.print-table td:nth-child(1) {
  width: 20%; 
}

.print-table th:nth-child(2),.print-table td:nth-child(2) {
  width: 15%; 
}

.print-table th:nth-child(3),.print-table td:nth-child(3) {
  width: 15%; 
}

.print-table th:nth-child(4),.print-table td:nth-child(4) {
  width: 15%; 
}

.print-table th:nth-child(5),.print-table td:nth-child(5) {
  width: 30%;
}

.print-table th:nth-child(6),.print-table td:nth-child(6) {
  width: 10%;
}
</style>
